<fieldset class="layui-elem-field layui-field-title">
	<legend>添加商品</legend>
</fieldset>

<style type="text/css">
	#demo2 img {
		width: 92px;
		height: 92px;
	}
	#demo2 span{
		position: relative;
	}
	#demo2 span:hover::after{
		content: "X";
		display: block;
		background-color: #ff5722;
		width: 16px;
		height: 16px;
		border-radius: 16px;
		position: absolute;
		line-height: 16px;
		text-align: center;
		top: -46px;
		right: 0px;
	}
</style>

<form class="layui-form">

	<div class="layui-form-item">
		<label class="layui-form-label">商品一级分类</label>
		<div class="layui-input-inline">
			<select name="parent" lay-filter="parent">
	
			</select>
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">商品二级分类</label>
		<div class="layui-input-inline">
			<select name="goodsSortId">
				<option value ="">请选择商品二级分类</option>
			</select>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商品名称</label>
		<div class="layui-input-inline">
			<input type="text" name="name" class="layui-input" placeholder="请输入商品名称" />
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商品描述</label>
		<div class="layui-input-inline">
			<input type="tex" name="dscp" class="layui-input" placeholder="请输入商品描述" />
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商品价格</label>
		<div class="layui-input-inline">
			<input type="number" name="price" class="layui-input" placeholder="请输入商品价格" />
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商品类型</label>
		<div class="layui-input-inline">
			<input type="text" name="version" class="layui-input" placeholder="请输入商品类型" />
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商品颜色</label>
		<div class="layui-input-inline">
			<input type="text" name="color" class="layui-input" placeholder="请输入商品颜色" />
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商品套餐</label>
		<div class="layui-input-inline">
			<input type="text" name="suit" class="layui-input" placeholder="请输入商品套餐" />
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">商品库存</label>
		<div class="layui-input-inline">
			<input type="number" name="count" class="layui-input" placeholder="请输入商品库存" />
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label">分类图片</label>
		<div class="layui-input-block">
			<!-- 使用layUI的上传图片插件 -->
			<div class="layui-upload">
				<button type="button" class="layui-btn" id="test2">图片上传</button>
				<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
					预览图：
					<div class="layui-upload-list" id="demo2"></div>
				</blockquote>
			</div>
		</div>
	</div>

	<div class="layui-form-item">
		<label class="layui-form-label"></label>
		<div class="layui-input-inline">
			<button type="submit" class="layui-btn layui-btn-danger" lay-submit lay-filter="add">添加商品</button>
		</div>
	</div>

</form>

<script type="text/javascript">
	layui.use(['form', 'upload'], function() {
		var form = layui.form;
		var upload = layui.upload;

		// 获取当前的token，在请求时，添加到请求头当中
		var token = getCookie("token");

		// 获取商品一级分类
		$.ajax({
			url: 'http://127.0.0.1:9000/api/goodsSorts',
			type: 'get',
			data: {},
			dataType: 'json',
			success: function(data) {
				if (data.status == 200){
					var html = "<option value=''>请选择商品一级分类</option>";
					$.each(data.data.list, function(index, item) {
						html += '<option value="' + item.id + '">' + item.name + '</option>';
					});
					$("select[name='parent']").html(html);
					// 渲染表单
					form.render();
				}
			},
			error: function() {

			}
		});
		
		// 二级分类联动
		form.on('select(parent)', function(data){
			// 获取点击的一级分类
			var parent = data.value;
			if(parent>0){
				// 获取二级分类
				$.ajax({
					url: 'http://127.0.0.1:9000/api/goodsSorts',
					type: 'get',
					data: {parent: parent},
					dataType: 'json',
					success: function(data) {
						if (data.status == 200){
							var html = "<option value=''>请选择商品二级分类</option>";
							$.each(data.data.list, function(index, item) {
								html += '<option value="' + item.id + '">' + item.name + '</option>';
							});
							$("select[name='goodsSortId']").html(html);
							// 渲染表单
							form.render();
						}
					},
					error: function() {
				
					}
				});
			} else {
				$("select[name='goodsSortId']").html("<option value=''>请选择商品二级分类</option>");
				// 渲染表单
				form.render();
			}
		});

		//多图片上传
		upload.render({
			elem: '#test2',
			url: 'http://127.0.0.1:9000/upload' //此处配置你自己的上传接口即可
				,
			multiple: true,
			done: function(res) {
				//上传完毕  每上传一张图片，都会响应一次
				$('#demo2').append('<span><img src="http://127.0.0.1:9000/upload/' + res.data +
					'" class="layui-upload-img">' +
					'<input type="hidden" name="picture" value="' + res.data + '"></span>')
			}
		});
		
		// 添加图片点击事件
		$("#demo2").on("click", "span", function(){
			$(this).remove();
		});

		// 表单提交
		form.on('submit(add)', function(data) {

			// 获取所有的图片，组成一个数组
			var pictures = [];
			$("input[name='picture']").each(function() {
				pictures.push({
					name: $(this).val()
				});
			});
			// 将数组放到data.field中
			data.field.pictures = pictures;

			$.ajax({
				url: 'http://127.0.0.1:9000/api/goodss',
				type: 'post',
				data: JSON.stringify(data.field),
				contentType: 'application/json; charset=utf-8',
				dataType: 'json',
				success: function(data) {
					if (data.status == 201) {
						gotoUrl("goods/list.html");
					} else {
						layer.msg(data.msg || data.message);
					}
				},
				error: function() {

				}
			});
			return false;
		});

	});
</script>
